import React from 'react'
import { Upload, message,Button } from 'antd';
import { ConsoleSqlOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { post } from '../../Utils/axios'
import {Url} from '@/Utils/services/url'
const url = Url.upLoad
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}


class Avatar extends React.Component {
  constructor(props:any){
    super(props)
    this.state = {
      loading: false,
      imageUrl:[],
      image:''
    };
  }
  handleChange = (info:any) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return info
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (image:any) =>{
        this.setState({
          image,
          loading: false,
        })}
      );
      return info
    }
  };
  
  // 上传
  upLoad = ()=>{
    let form = new FormData()
    form.append('multipartFile',this.state.imageUrl[0])
          post(url,form).then(res =>{
            this.props.pictureKey(res)
          })
      
      //  return new Promise((resolve,reject) =>{
      //     post(url,form).then(res =>{
      //       console.log(res)
      //       resolve(res)
      //     })
      //  })
          
  }
  // 上传之前
  beforeUpload = (file:any)=> {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    this.setState(state =>({
      imageUrl:[...state.imageUrl,file]
    }))
    return isJpgOrPng && isLt2M;
  }
  shouldComponentUpdate(nextProps:any, nextState:any, nextContext:any) {
    if(nextProps.fileList !== undefined && nextProps.fileList.imgUrl !== undefined &&  nextProps.fileList.imgUrl !== this.state.image){
      this.setState({image: nextProps.fileList.imgUrl})
    }
    return true;
  }
  render() {
    
    const { loading,image } = this.state;
    const {recommendSize} = this.props
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <div>
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action={this.upLoad}   //  自动上传
          beforeUpload={this.beforeUpload}
          // onChange={(e)=>this.props.pictureKey(e)}
          onChange={this.handleChange}
        >
          {image ? <img src={image} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
        </Upload>
        <span
          style={{fontSize:'.5rem',color:'#ccc'}}
            >{recommendSize}</span>
      </div>
    );
  }
}

export default Avatar;